VNEXT-83184: Redesign checkout coupon UI by abansal2-godaddy · Pull Request #1439 · godaddy/javascript

abansal2-godaddy · 2026-08-24T08:10:01Z

Summary

Implements VNEXT-83184: redesign the checkout coupon / promotion code UI (default → filled → success → error).

Where this lives: @godaddy/react DiscountStandalone (used by Bruce when enablePromotionCodes is on). Copy keys are in @godaddy/localizations (enUs only; GOLF for other locales).

Why a new layout (not a small tweak)

Old UI was four separate pieces wired side-by-side:

Old piece	Old look
`DiscountInput`	Standalone text field
`DiscountApplyButton`	Separate button next to the field
`DiscountErrorList`	Large bordered destructive alert with a bullet list
`Discounts` + `DiscountTag`	Small chip tags (code + X only — no amount)

New design from the ticket is a different composition:

Label: Have a coupon code?
One combined bordered row — input + Apply (or clear control when there is an error)
Compact helper text under the field for errors (not the alert panel)
Full-width green success bar — check + code + – $amount + remove

That is why markup for the field is inlined in DiscountStandalone, and applied coupons use a dedicated DiscountAppliedBar, instead of stretching the old input / button / chip APIs into a shape they were not built for.

Why those imports were removed from `DiscountStandalone`

They were removed from this checkout path only because the redesigned states no longer use those components:

Removed import	Why it no longer fits this path
`DiscountInput`	Input must sit inside the shared bordered row with Apply/clear, not as its own `Input` wrapper
`DiscountApplyButton`	Apply is inside that same row; enabled/disabled styling is tied to field focus/value/error states
`DiscountErrorList`	Spec is a short helper line under the field, not a destructive alert box
`Discounts` / `DiscountTag`	Spec needs formatted amount + full-width success bar; chips only showed the code

Follow-up (not blocking this PR): the old discount-input, discount-apply-button, discount-error-list, discount-tag, and discounts files are still in the package and still exported. They are unused by DiscountStandalone. We can delete them or evolve them in place in a cleanup PR once we confirm nothing else imports them.

What changed in this PR

discount-standalone.tsx — new combined field + error helper; wires success via DiscountAppliedBar
New discount-applied-bar.tsx — success-state row (code + amount + remove)
enUs.ts — haveACouponCode, invalid, removeCoupon
Unit tests updated for the new copy / success rendering
Changeset → patch for @godaddy/react + @godaddy/localizations

Jira

https://godaddy-corp.atlassian.net/browse/VNEXT-83184

Test plan

Discount / coupon unit tests pass locally
After Version Packages publish + Bruce dep bump: on dev or test checkout, verify default / filled / success / error in order summary
Applied bar shows formatted amount; remove clears the code
Invalid code shows compact helper under the field (not the old alert box)
Empty Apply stays disabled

Implement combined coupon input states (default, filled, success, error) in DiscountStandalone, add DiscountAppliedBar, and extend enUs discounts strings for GOLF to translate into other locales. Co-authored-by: Cursor <cursoragent@cursor.com>

Versioning can be handled in the release workflow; the coupon redesign does not need a local changeset. Co-authored-by: Cursor <cursoragent@cursor.com>

changeset-bot · 2026-08-24T08:10:07Z

🦋 Changeset detected

Latest commit: dbf3f0d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@godaddy/localizations	Patch
@godaddy/react	Patch
nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Bump @godaddy/react and @godaddy/localizations so the Version Packages workflow can publish after merge. Co-authored-by: Cursor <cursoragent@cursor.com>

Clarify in DiscountStandalone and DiscountAppliedBar that the redesign cannot reuse the old input/button/chip composition, so those imports were dropped from this path. Co-authored-by: Cursor <cursoragent@cursor.com>

Keep the explanation in the PR description and review comments instead. Co-authored-by: Cursor <cursoragent@cursor.com>

abansal2-godaddy

Reviewer notes (also in the PR description): why the layout changed, and why the old discount imports were dropped from — without leaving that rationale in the source files.

abansal2-godaddy · 2026-08-24T09:52:56Z

 import { eventIds } from '@/tracking/events';
 import { TrackingEventType, track } from '@/tracking/track';
-import { Discounts } from './discounts';
 import type { DiscountFormProps } from './types';


Why these imports changed / why the old ones are gone from this file

Previously this file composed:

DiscountInput

DiscountApplyButton

DiscountErrorList

Discounts / DiscountTag

Those matched the old UX (separate input + button, large alert errors, chip tags with code only).

VNEXT-83184 needs a different UX, so those imports were removed from this path:

Input + Apply (or clear) must live in one bordered row → not standalone DiscountInput / DiscountApplyButton

Errors are a short helper under the field → not DiscountErrorList

Success needs code + formatted amount + remove in a full-width bar → not chip DiscountTags

The old modules are still in the package/exported for now; they just are not used by DiscountStandalone anymore. Cleanup can be a follow-up.

abansal2-godaddy · 2026-08-24T09:52:56Z

+      <div className='flex flex-col gap-1.5'>
+        <div
+          className={cn(
+            'flex h-14 items-center justify-between rounded-md border bg-white py-2 pl-4 pr-2',
+            hasError
+              ? 'border-[#EF4444]'
+              : isFocused || hasInputValue
+                ? 'border-[#2563EB]'
+                : 'border-[#D1D5DB]'
+          )}


Why the layout is inlined here

This combined bordered row (input + Apply, border color by default/filled/error) is the core of the redesign. Wiring the old separate input/button components into this shell would mean rewriting their APIs anyway, so the field markup lives here and keeps the four visual states in one place.

abansal2-godaddy · 2026-08-24T09:52:56Z

+  inputInMinorUnits = true,
+  onRemove,
+  isRemoving,
+}: DiscountAppliedBarProps) {


Why a new DiscountAppliedBar instead of tweaking DiscountTag

DiscountTag is a small chip (tag icon + code + X) and has no amount. The success state in the design is a full-width green bar: check + code + – $amount + remove.

That is a different component shape, so we added this bar for DiscountStandalone rather than overloading the chip. DiscountTag / Discounts remain in the package unused by this path until a cleanup PR.

abansal2-godaddy · 2026-08-24T09:53:47Z

Reviewer note: layout vs old imports

Details are on the Files changed tab (inline comments) and in the updated PR description.

Short version

New design is a combined input+Apply row, compact error helper, and a success bar with amount — not the old separate input/button/alert/chip composition.
That is why DiscountStandalone dropped DiscountInput / DiscountApplyButton / DiscountErrorList / Discounts / DiscountTag and why DiscountAppliedBar was added.
Rationale is documented in the PR only (not as source comments).

…c intact. Preserve the original code collection and handlers; limit the change to the new coupon UI, amount lookup for the success bar, and error helper copy. Co-authored-by: Cursor <cursoragent@cursor.com>

pbennett1-godaddy · 2026-08-26T18:29:24Z

@abansal2-godaddy - is the main goal here to show each coupon codes value instead of a single discount total? I'd prefer not to make huge design changes if possible. We currently follow a similar pattern to other checkouts so I don't think it would be confusing users thinking it's mandatory.

abansal2-godaddy · 2026-08-27T06:04:57Z

@abansal2-godaddy - is the main goal here to show each coupon codes value instead of a single discount total? I'd prefer not to make huge design changes if possible. We currently follow a similar pattern to other checkouts so I don't think it would be confusing users thinking it's mandatory.

No @pbennett1-godaddy ,It's more of a UI and experience change only with proper error states and intent when a C1 applies a coupon.
Also how can I test these changes on bruce storefront on dev/test environment?

pbennett1-godaddy · 2026-08-31T14:01:20Z

No @pbennett1-godaddy ,It's more of a UI and experience change only with proper error states and intent when a C1 applies a coupon. Also how can I test these changes on bruce storefront on dev/test environment?

you can use the nextjs sample app in this repo to test against a dev/test env store. Can you look into what discount GPAs actually return on failure? I don't think we should have a default of "Coupon isn't valid" cause I think there is basically only a single error of "coupon code failed to apply" from the BE. Invalid would lead customers to believe the coupon they tried to use even if there was an error was an invalid code.

abansal2-godaddy · 2026-08-31T17:10:48Z

No @pbennett1-godaddy ,It's more of a UI and experience change only with proper error states and intent when a C1 applies a coupon. Also how can I test these changes on bruce storefront on dev/test environment?

you can use the nextjs sample app in this repo to test against a dev/test env store. Can you look into what discount GPAs actually return on failure? I don't think we should have a default of "Coupon isn't valid" cause I think there is basically only a single error of "coupon code failed to apply" from the BE. Invalid would lead customers to believe the coupon they tried to use even if there was an error was an invalid code.

Yes you are right, I'll check what we get as response under various cases from BE and have the error state render the intended failure

abansal2-godaddy and others added 2 commits August 24, 2026 13:30

Remove changeset file from the coupon UI change.

29c7173

Versioning can be handled in the release workflow; the coupon redesign does not need a local changeset. Co-authored-by: Cursor <cursoragent@cursor.com>

abansal2-godaddy requested a review from a team as a code owner August 24, 2026 08:10

Add changeset for checkout coupon UI redesign.

e965e3e

Bump @godaddy/react and @godaddy/localizations so the Version Packages workflow can publish after merge. Co-authored-by: Cursor <cursoragent@cursor.com>

abansal2-godaddy marked this pull request as draft August 24, 2026 09:44

abansal2-godaddy and others added 2 commits August 24, 2026 15:19

Document why coupon UI inlines layout and adds DiscountAppliedBar.

42dee48

Clarify in DiscountStandalone and DiscountAppliedBar that the redesign cannot reuse the old input/button/chip composition, so those imports were dropped from this path. Co-authored-by: Cursor <cursoragent@cursor.com>

Remove in-code layout rationale from discount components.

7a9ff3e

Keep the explanation in the PR description and review comments instead. Co-authored-by: Cursor <cursoragent@cursor.com>

abansal2-godaddy commented Aug 24, 2026

View reviewed changes

abansal2-godaddy marked this pull request as ready for review August 24, 2026 09:53

Restructure DiscountStandalone so the PR diff keeps apply/remove logi…

51c4f09

…c intact. Preserve the original code collection and handlers; limit the change to the new coupon UI, amount lookup for the success bar, and error helper copy. Co-authored-by: Cursor <cursoragent@cursor.com>

Merge branch 'main' into VNEXT-83184

dbf3f0d

Navigation Menu

Uh oh!

VNEXT-83184: Redesign checkout coupon UI - #1439

VNEXT-83184: Redesign checkout coupon UI#1439
abansal2-godaddy wants to merge 7 commits into
godaddy:mainfrom
abansal2-godaddy:VNEXT-83184

abansal2-godaddy commented Aug 24, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Aug 24, 2026 •

edited

Loading

Uh oh!

abansal2-godaddy left a comment

Uh oh!

abansal2-godaddy Aug 24, 2026 •

edited

Loading

Uh oh!

abansal2-godaddy Aug 24, 2026

Uh oh!

abansal2-godaddy Aug 24, 2026 •

edited

Loading

Uh oh!

abansal2-godaddy commented Aug 24, 2026

Uh oh!

pbennett1-godaddy commented Aug 26, 2026 •

edited

Loading

Uh oh!

abansal2-godaddy commented Aug 27, 2026 •

edited

Loading

Uh oh!

pbennett1-godaddy commented Aug 31, 2026

Uh oh!

abansal2-godaddy commented Aug 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

abansal2-godaddy commented Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why a new layout (not a small tweak)

Why those imports were removed from DiscountStandalone

What changed in this PR

Jira

Test plan

Uh oh!

changeset-bot Bot commented Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

abansal2-godaddy left a comment

Choose a reason for hiding this comment

Uh oh!

abansal2-godaddy Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

abansal2-godaddy Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

abansal2-godaddy Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

abansal2-godaddy commented Aug 24, 2026

Reviewer note: layout vs old imports

Uh oh!

pbennett1-godaddy commented Aug 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abansal2-godaddy commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pbennett1-godaddy commented Aug 31, 2026

Uh oh!

abansal2-godaddy commented Aug 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

abansal2-godaddy commented Aug 24, 2026 •

edited

Loading

Why those imports were removed from `DiscountStandalone`

changeset-bot Bot commented Aug 24, 2026 •

edited

Loading

abansal2-godaddy Aug 24, 2026 •

edited

Loading

abansal2-godaddy Aug 24, 2026 •

edited

Loading

pbennett1-godaddy commented Aug 26, 2026 •

edited

Loading

abansal2-godaddy commented Aug 27, 2026 •

edited

Loading